.profile {
  color: variable('secondary-text-on-surface') !important;

  .profile-avatar {
    height: 120px;
    width: 120px;
  }

  .profile-meta {
    margin-top: 0.5rem;

    * {
      margin-bottom: 0.25rem;
    }
  }

  .profile-name {
    font-weight: bold;
  }

  .profile-company,
  .profile-about,
  .profile-location {
    display: inline;
    margin-right: 0.5rem;
    white-space: pre;
  }

  a {
    color: variable('accent');
  }

  .svg-inline--fa {
    vertical-align: middle;
  }
}

.profile-compact {
  .profile-avatar {
    max-width: 100%;
    border-radius: 0 !important;
  }

  .profile-company,
  .profile-about,
  .profile-location {
    display: block;
  }
}
